<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Partytown Test Page" />
    <title>Svg</title>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
          Apple Color Emoji, Segoe UI Emoji;
        font-size: 12px;
      }
      h1 {
        margin: 0 0 15px 0;
      }
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      a {
        display: block;
        padding: 16px 8px;
      }
      a:link,
      a:visited {
        text-decoration: none;
        color: blue;
      }
      a:hover {
        background-color: #eee;
      }
      li {
        display: flex;
        margin: 15px 0;
      }
      li strong,
      li code,
      li button {
        white-space: nowrap;
        flex: 1;
        margin: 0 5px;
      }
    </style>
    <script>
      partytown = {
        logCalls: true,
        logGetters: true,
        logSetters: true,
        logStackTraces: false,
        logScriptExecution: true,
        logMainAccess: true,
      };
    </script>
    <script src="/~partytown/debug/partytown.js"></script>
  </head>
  <body>
    <h1>Svg</h1>
    <ul>
      <li>
        <strong>createElementNS()</strong>
        <code id="testCreateNS"></code>
        <script type="text/partytown">
          (function () {
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            document.getElementById('testCreateNS').textContent = svg.nodeName + ' ' + svg.nodeType + ' ' + svg.constructor.name;
          })();
        </script>
      </li>

      <li>
        <strong>namespaceURI</strong>
        <code id="testNamespaceURI"></code>
        <script type="text/partytown">
          (function () {
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            document.getElementById('testNamespaceURI').textContent = svg.namespaceURI;
          })();
        </script>
      </li>

      <li>
        <strong>create svg</strong>
        <span id="svgCreate"></span>
        <script type="text/partytown">
          (function () {
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

            svg.setAttribute('viewbox', '0 0 24 24');
            svg.setAttribute('width', '24px');
            svg.setAttribute('height', '24px');

            path.setAttribute(
              'd',
              'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'
            );
            path.setAttribute('fill', 'red');
            svg.appendChild(path);

            document.getElementById('svgCreate').appendChild(svg);
          })();
        </script>
      </li>

      <li>
        <strong>g.getBBox()</strong>
        <span id="testBBox"></span>
        <span id="svgG"></span>
        <script type="text/partytown">
          (function () {
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

            svg.setAttribute('viewbox', '0 0 24 24');
            svg.setAttribute('width', '24px');
            svg.setAttribute('height', '24px');

            path.setAttribute(
              'd',
              'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'
            );
            path.setAttribute('fill', 'green');
            g.appendChild(path);
            svg.appendChild(g);
            document.getElementById('svgG').appendChild(svg);

            const elm = document.getElementById('testBBox');
            const bbox = g.getBBox();

            const Cstr = g.constructor;
            const SuperCstr = Object.getPrototypeOf(Cstr);

            elm.textContent =
              JSON.stringify({
                w: bbox.width,
                h: bbox.height,
              }) +
              ' ' +
              Cstr.name +
              ' ' +
              SuperCstr.name;
          })();
        </script>
      </li>

      <li>
        <strong>ownerSVGElement</strong>
        <span id="testOwnerSVGElement"></span>
        <span id="svgOwnerSVGElement"></span>
        <script type="text/partytown">
          (function () {
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

            svg.setAttribute('viewbox', '0 0 24 24');
            svg.setAttribute('width', '24px');
            svg.setAttribute('height', '24px');

            path.setAttribute(
              'd',
              'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'
            );
            path.setAttribute('fill', 'blue');
            g.appendChild(path);
            svg.appendChild(g);
            document.getElementById('svgOwnerSVGElement').appendChild(svg);

            const elm = document.getElementById('testOwnerSVGElement');
            const gOwnerSVGElement = g.ownerSVGElement;
            elm.textContent =
              String(gOwnerSVGElement === svg) +
              ' ' +
              String(svg.ownerSVGElement) +
              ' ' +
              String(gOwnerSVGElement.tagName);
          })();
        </script>
      </li>

      <li>
        <strong>getScreenCTM()</strong>
        <span id="testGetScreenCTM1"></span>
        <span id="testGetScreenCTM2"></span>
        <span id="testGetScreenCTM"></span>
        <span id="svgGetScreenCTM"></span>
        <script type="text/partytown">
          (function () {
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

            svg.setAttribute('viewbox', '0 0 24 24');
            svg.setAttribute('width', '24px');
            svg.setAttribute('height', '24px');

            path.setAttribute(
              'd',
              'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'
            );
            path.setAttribute('fill', 'purple');
            g.appendChild(path);
            svg.appendChild(g);
            document.getElementById('svgGetScreenCTM').appendChild(svg);

            const m1 = g.getScreenCTM();
            const m2 = m1.inverse();

            document.getElementById('testGetScreenCTM1').textContent = m1.e;
            document.getElementById('testGetScreenCTM2').textContent = m2.e;
            document.getElementById('testGetScreenCTM').textContent = ('-' + m1.e) === String(m2.e);
          })();
        </script>
      </li>

      <li>
        <strong>foreignObject</strong>
        <span id="svgForeignObject"></span>
        <script type="text/partytown">
          (function () {
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            const fo = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');

            svg.setAttribute('width', '20');
            svg.setAttribute('height', '20');
            fo.setAttribute('width', '20');
            fo.setAttribute('height', '20');

            const div = document.createElement('div');
            div.style.textAlign = 'center';

            div.style.setProperty('background', 'red');
            div.style.setProperty('color', 'white');

            div.style.setProperty('width', '200px');
            div.style.removeProperty('width');

            const text = document.createTextNode('88');
            div.appendChild(text);

            fo.appendChild(div);
            svg.appendChild(fo);
            document.getElementById('svgForeignObject').appendChild(svg);
          })();
        </script>
      </li>
    </ul>

    <script type="text/partytown">
      (function () {
        document.body.classList.add('completed');
      })();
    </script>

    <hr />
    <p><a href="/tests/">All Tests</a></p>
  </body>
</html>
